<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="./../css/style.css">
</head>
<body>
<main class="clearFix">
  <div class="contentWrap fl">
    <div>
      save() restore() <br>
      save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。
      Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
      <br>
      <br>
      Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：
      <ul>
        <li>
          当前应用的变形（即移动，旋转和缩放，见下）
        </li>
        <li>
          strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY,
          shadowBlur, shadowColor, globalCompositeOperation 的值
        </li>
        <li>
          当前的裁切路径（clipping path），会在下一节介绍
        </li>
      </ul>
      <p>
        你可以调用任意多次 save 方法。
        <br>
        每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。
      </p>
      <p class="note">
        <cite>
          如果不进行 save 和 restore，转换会相对上一次的位置进行；即：translate、rotate等等的参数就是一个delta值
        </cite>
      </p>
      <hr>
    </div>
  </div>
  <div class="contentWrap fr">
    <h3>save 和 restore 的应用例子</h3>
    <div id="canvas" class="wrap_200">

    </div>
  </div>
</main>
</body>
</html>

<script src="./../js/CanvasCtx.js"></script>
<script>
  function draw() {
    let ctx = new CanvasCtx('#canvas').ctx;

    ctx.fillRect(10, 10, 150, 150);  // 使用默认设置绘制一个矩形
    ctx.save(); // 保存默认状态

    ctx.fillStyle = '#09f'; // 重新配置一个颜色
    ctx.fillRect(15, 15, 120, 120);
    ctx.save(); // 保存当前状态

    ctx.fillStyle = '#fff';
    ctx.gloabalAlpha = 0.5;
    ctx.fillRect(30, 30, 90, 90); // 使用新配置画一个矩形

    ctx.restore();
    ctx.fillRect(45, 45, 70, 70);

    ctx.restore();
    ctx.fillRect(50, 50, 30, 30);

  }

  draw();
</script>
